<!-- 用户列表 -->
<template>
  <div class="DealerInfoStyle">
    <div class="cardAdmin">
      <div class="formContainer">
        <div class="formSearch">
          <span
            style="padding: 0 10px; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">姓：</span>
          <el-input style="flex: 3;" v-model="form.last_name"></el-input>
        </div>
        <div class="formSearch">
          <span
            style="padding: 0 10px; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">名：</span>
          <el-input style="flex: 3;" v-model="form.first_name"></el-input>
        </div>
        <div class="formSearch">
          <span
            style="padding: 0 10px; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">邮箱：</span>
          <el-input style="flex: 3;" v-model="form.email"></el-input>
        </div>
        <div class="formSearch">
          <span
            style="padding: 0 10px; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">手机：</span>
          <el-input style="flex: 3;" v-model="form.phone"></el-input>
        </div>
        <div class="" style="height: 40px;;width: 100%;justify-content: right;margin-right: 6px;position: relative;">
          <el-button class="el-icon-search" style="position: absolute;right: 0;top: 3px;" type="primary" size="small"
            @click="get_userList()">
            查询</el-button>
        </div>
        <div style="position: absolute;left: 10px;bottom: 5px;">
          <el-button type="success" icon="el-icon-circle-plus-outline" size="small" @click="addbtn()">新增用户</el-button>
        </div>
      </div>
    </div>

    <!-- 表格 -->
    <el-table :data="CompanyTable" border style="width: 100%;min-height: 78%;max-height: 78%;overflow: auto;">
      <el-table-column resizable prop="user_id" label="id" width="60" align="center">
      </el-table-column>
      <el-table-column resizable prop="enable" label="启用" width="auto" min-width="100px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.enable == 1 ? '已启用' : '未启用' }}</span>
        </template>
      </el-table-column>
      <el-table-column resizable prop="is_vip" label="VIP" width="auto" min-width="100px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.is_vip == 1 ? '是' : '否' }}</span>
        </template>
      </el-table-column>
      <el-table-column resizable prop="current_use_combo" label="套餐级别" width="auto" min-width="170px" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.current_use_combo == 0"> 当前未有任何套餐 </span>
          <span v-if="scope.row.current_use_combo == 1"> 港股打新會員套餐 </span>
          <span v-if="scope.row.current_use_combo == 2"> 港美股黃金套餐 </span>
          <span v-if="scope.row.current_use_combo == 3"> 美股期權套利策略 </span>
          <span v-if="scope.row.current_use_combo == 4"> 美股ETF套利策略 </span>
        </template>
      </el-table-column>
      <el-table-column resizable prop="remark" label="备注" width="auto" min-width="250px" align="center">
      </el-table-column>
      <el-table-column resizable prop="email" label="邮箱" width="auto" min-width="250px" align="center">
      </el-table-column>
      <el-table-column resizable prop="last_name" label="姓" width="auto" min-width="150px" align="center">
      </el-table-column>
      <el-table-column resizable prop="first_name" label="名" width="auto" min-width="150px" align="center">
      </el-table-column>
      <el-table-column resizable prop="phone" label="手机" width="auto" min-width="150px" align="center">
      </el-table-column>
      <el-table-column resizable prop="headimg" label="头像" width="auto" min-width="200px" align="center">
        <template slot-scope="scope">
          <el-image style="width: 50px;height:20px" :src="'' + scope.row.headimg"
            :preview-src-list="['' + scope.row.headimg]">
            <div slot="error" class="image-slot" style="width: 50px;">
              <div style="width: 50px;">{{ scope.row.headimg == '' ? '加载失败' : '空图片或者地址错误' }}</div>
            </div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column resizable prop="gender" label="性别" width="auto" min-width="100px" align="center">
      </el-table-column>

      <el-table-column resizable prop="birthday" label="生日" width="auto" min-width="150px" align="center">
      </el-table-column>
      <el-table-column resizable prop="vip_expiration_time" label="过期时间" width="auto" min-width="200px" align="center">
      </el-table-column>
      <el-table-column resizable prop="add_time" label="创建时间" width="auto" min-width="200px" align="center">
      </el-table-column>
      <el-table-column resizable label="操作" width="150" align="center">
        <template slot-scope="scope">
          <el-button @click="tableEditing(scope.row)" type="primary" plain size="small">编辑</el-button>
          <el-button @click="del_userDeletion(scope.row.user_id)" type="danger" plain size="small">刪除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div style="text-align: right; margin-top: 5px;">
      <el-pagination background layout="prev, pager, next,total" :total="total" :page-size="pagesize"
        @current-change="current_change"></el-pagination>
    </div>

    <!-- 弹窗 -->
    <el-dialog :close-on-click-modal="false" :title="titles" :visible.sync="dialogVisible" width="70%"
      @close="handleClose" top="15vh">
      <div class="pop-up-form">
        <div style="display: flex;justify-content: center;width: 95%;margin: 8px 0;">
          <div style="flex: 1;display: flex;">
            <span style="flex: 4; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">姓：</span>
            <el-input style="flex: 6;" v-model="addform.last_name"></el-input>

          </div>
          <div style="display: flex;flex: 1;">
            <span style="flex: 4; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">名：</span>
            <el-input style="flex: 6;" v-model="addform.first_name"></el-input>
          </div>
        </div>

        <div style="display: flex;justify-content: center;width: 95%;margin: 8px 0;">
          <div style="flex: 1;display: flex;">
            <span style="flex: 4; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">邮箱：</span>
            <el-input style="flex: 6;" v-model="addform.email"></el-input>

          </div>
          <div style="display: flex;flex: 1;">
            <span style="flex: 4; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">手机：</span>
            <el-input style="flex: 6;" v-model="addform.phone"></el-input>
          </div>
        </div>

        <div style="display: flex;justify-content: center;width: 95%;margin: 8px 0;">
          <div style="flex: 1;display: flex;">
            <span style="flex: 4; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">是否vip：</span>
            <el-switch style="flex: 6;height: 40px;width: 100%;" v-model="addform.is_vip" active-text="是"
              :active-value="1" :inactive-value="0" inactive-text="否"></el-switch>

          </div>
          <div style="display: flex;flex: 1;">
            <span style="flex: 4; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">vip
              到期时间：</span>
            <el-date-picker :disabled="!isVip" style="flex: 6;" v-model="addform.vip_expiration_time" type="datetime"
              placeholder="请选择到期时间" :format="'yyyy-MM-dd HH:mm:ss'" :value-format="'yyyy-MM-dd HH:mm:ss'">
            </el-date-picker>
          </div>
        </div>


        <div style="display: flex;justify-content: center;width: 95%;margin: 8px 0;">
          <div style="flex: 1;display: flex;">
            <span style="flex: 2; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">套餐级别：</span>
            <el-select :disabled="!isVip" style="flex: 8" v-model="addform.current_use_combo" placeholder="请选择套餐等级">
              <el-option label="港股打新會員套餐" :value="1" />
              <el-option label="港美股黃金套餐" :value="2" />
              <el-option label="美股期權套利策略" :value="3" />
              <el-option label="美股ETF套利策略" :value="4" />
            </el-select>
          </div>
        </div>



        <div style="display: flex;justify-content: center;width: 95%;margin: 8px 0;">
          <div style="flex: 1;display: flex;">
            <span style="flex: 4; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">是否启用：</span>
            <el-switch style="flex: 6;height: 40px;width: 100%;" v-model="addform.enable" active-text="是"
              :active-value="1" :inactive-value="0" inactive-text="否"></el-switch>

          </div>
          <div style="display: flex;flex: 1;">
            <span style="flex: 4; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">头像：</span>
            <input style="flex: 6;line-height: 40px;margin-left:0" type="file" ref="fileInput1" id="roleHeadgear"
              accept="image/*" @change="handleFileChange" required />
          </div>
        </div>

        <div style="display: flex;justify-content: center;width: 95%;margin: 8px 0;">
          <div style="flex: 1;display: flex;">
            <span style="flex: 4; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">性别：</span>
            <el-select style="flex: 6;" v-model="addform.gender" placeholder="性别">
              <el-option label="男" value="xy">
              </el-option>
              <el-option label="女" value="xx">
              </el-option>
            </el-select>

          </div>
          <div style="display: flex;flex: 1;">
            <span style="flex: 4; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">生日：</span>
            <el-date-picker style="flex: 6;" v-model="addform.birthday" type="date" placeholder="请选择生日"
              :format="'yyyy-MM-dd'" :value-format="'yyyy-MM-dd'">
            </el-date-picker>
          </div>
        </div>

        <div style="display: flex;justify-content: center;width: 95%;margin: 8px 0;">
          <div style="display: flex;flex: 1;">
            <span style="flex: 4; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">密码：</span>
            <el-input style="flex: 6;" placeholder="编辑时，密码不设置为不修改" v-model="addform.password"></el-input>
          </div>
          <div style="flex: 1;display: flex;">
            <span style="flex: 4; text-align: right; line-height: 40px; font-weight: 700; font-size: 15px;">备注：</span>
            <el-input style="flex: 6;" v-model="addform.remark"></el-input>
          </div>
        </div>

      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
        <el-button v-show="titles == '新增'" type="primary" @click="add_userAddition()" size="small">确
          定</el-button>
        <el-button v-show="titles == '编辑'" type="primary" @click="upd_userEditing()" size="small">更
          新</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { userList, userAddition, userEditing, userDeletion } from "@/utils/api";
export default {
  name: 'CompanyInfo',
  data() {
    return {
      form: {
        last_name: '',
        first_name: '',
        email: '',
        phone: ''
      },
      addform: {
        last_name: '',
        first_name: '',
        email: '',
        phone: '',
        enable: 0,
        is_vip: 0,
        vip_expiration_time: '',
        gender: '',
        birthday: '',
        remark: '',
        password: '',
        current_use_combo: 0
      },
      CompanyTable: [],
      dialogVisible: false,
      total: 100, //总条数
      pagesize: 10, //指定展示多少条
      currentPage: 1, //当前页码
      titles: '',
      roleHeadgear: null,
      row: []

    };
  },
  computed: {
    isVip() {
      return this.addform.is_vip === 1;
    },
  },
  watch: {
    'addform.is_vip': function (newValue) {
      if (newValue === 0) {
        this.addform.vip_expiration_time = null;  // 清空到期时间
        this.addform.current_use_combo = 0
      } else {
        if (this.titles == '编辑') {
          this.addform.current_use_combo = this.row.current_use_combo
        } else {

          this.addform.current_use_combo = 1
        }
      }
    },
  },
  mounted() {
    this.get_userList()
  },

  methods: {
    handleFileChange(event) {
      this.roleHeadgear = event.target.files[0];
      if (this.roleHeadgear) {
        this.$message.success('上传成功')
      }
    },
    // 查询用户列表
    async get_userList() {
      let data = {};
      data.page = this.currentPage
      if (this.form.first_name !== '') {
        data.first_name = Number(this.form.first_name)
      }
      if (this.form.last_name !== '') {
        data.last_name = Number(this.form.last_name)
      }
      if (this.form.email !== '') {
        data.email = this.form.email
      }
      if (this.form.phone !== '') {
        data.phone = this.form.phone
      }


      const res = await userList(data).catch((err) => {
        return console.error(err);
      });

      if (res && res.status == "200") {
        this.$message.success(res.data.message);
        this.CompanyTable = res.data.data.data
        this.total = res.data.data.total
      } else {
        this.$message.error(res.data.message);
      }
    },
    // 新增用户
    async add_userAddition() {
      let data = new FormData();

      // 遍历 addform 中的每个字段
      Object.keys(this.addform).forEach(key => {
        const value = this.addform[key];

        // 检查是否是有效的值
        if (value !== null && value !== undefined && value !== '') {
          data.append(key, value);  // 将有效的键值对添加到 FormData
        }
      });
      if (this.roleHeadgear) {
        data.append('headimg', this.roleHeadgear);  // 将有效的键值对添加到 FormData

      }
      const res = await userAddition(data).catch((err) => {
        this.$message.error(err.response.data.message)
        return console.error(err);
      });
      if (res && res.status == "200") {
        this.$message.success(res.data.message);
        this.get_userList()
        this.$refs.fileInput1.value = null
        this.dialogVisible = false
      } else {
        this.$message.error(res.data.message);
      }
    },
    // 更新用户
    async upd_userEditing() {
      let data = Object.assign({}, this.addform); // 浅拷贝
      // 删除空值键值对
      Object.keys(data).forEach(key => {
        if (data[key] === null || data[key] === undefined || data[key] === '') {
          delete data[key];
        }
      });
      const res = await userEditing(data).catch((err) => {
        return console.error(err);
      });
      if (res && res.status == "200") {
        this.$message.success(res.data.message);
        this.dialogVisible = false
        this.$refs.fileInput1.value = null
        this.get_userList()
      } else {
        this.$message.error(res.data.message);
      }
    },
    // 刪除用户
    async del_userDeletion(id) {
      try {
        await this.$confirm("是否继续执行操作？", "提示", {
          confirmButtonText: "是",
          cancelButtonText: "否",
          type: "warning",
        });

        let data = { user_id: id };
        const res = await userDeletion(data).catch((err) => {
          return console.error(err);
        });

        if (res && res.status == "200") {
          this.$message.success(res.data.message);
          this.dialogVisible = false;
          this.get_userList();
        } else {
          this.$message.error(res.data.message);
        }
      } catch (error) {
        // 用户点击取消或关闭对话框
        console.error(error);
      }
    },
    // 关闭弹窗时
    handleClose() {
      this.addform = {
        last_name: '',
        first_name: '',
        email: '',
        phone: '',
        enable: 0,
        is_vip: 0,
        vip_expiration_time: '',
        gender: '',
        birthday: '',

        remark: '',
        password: '',
        current_use_combo: 0
      }
      this.$refs.fileInput1.value = null
    },
    handleClosetable() {

    },
    // 分页
    current_change(currentPage) {
      this.currentPage = currentPage;
      this.get_userList();
    },
    // 重置
    resetForm() {
      this.form = {
        admin_name: ''
      }
      this.currentPage = 1
      this.get_userList();
    },
    // 编辑打开时
    tableEditing(row) {
      this.titles = '编辑'
      this.dialogVisible = true
      this.row = row

      this.addform.last_name = row.last_name
      this.addform.first_name = row.first_name
      this.addform.email = row.email
      this.addform.phone = row.phone
      this.addform.enable = row.enable
      this.addform.is_vip = row.is_vip
      this.addform.vip_expiration_time = row.vip_expiration_time
      this.addform.gender = row.gender
      this.addform.birthday = row.birthday
      this.addform.headimg = row.headimg
      this.addform.remark = row.remark
      this.addform.current_use_combo = row.current_use_combo
      // this.addform.password = row.password

      this.addform.user_id = row.user_id
    },
    // 新增打开时
    addbtn() {
      this.dialogVisible = true;
      this.titles = '新增'
    },
  },
};
</script>
<style>
.cell {
  font-size: 12px;
  white-space: nowrap !important;
}

.el-dialog__body {
  padding: 0 10px !important;
}

.demo-table-expand {
  font-size: 0;
  margin-left: 10px;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
<style lang="less" scoped>
.DealerInfoStyle {
  width: 100%;
  padding: 0 10px;
  // background-color: aquamarine;
  height: calc(100vh - 100px);
  // border: 1px #000 solid;

  .cardAdmin {
    position: relative;
    // height: 18%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0;

    border: #ebeef5 solid 1px;
    padding: 0 5px;
    margin-bottom: 2px;


    .formContainer {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      padding: 0;
      align-self: baseline;
      padding-bottom: 40px;
    }

    .formSearch {
      width: 25%;
      min-width: 25%;
      margin: 10px 0;
      height: 40px;
      display: flex;
      justify-content: center;
    }
  }

  .pop-up-form {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    align-self: baseline;
    margin: 10px 0;

    .form-options {
      width: 100%;
      min-width: 100%;
      height: 40px;
      display: flex;
      justify-content: center;
      margin: 10px 0;
    }
  }
}
</style>
